<html>
<head>
	<script src="../js/jquery-1.7.2.min.js" type="text/javascript" ></script>
	<script src="../js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
	<script src="../js/studentvoice.js" type="text/javascript"></script>
	<script src="../js/ClassDiagramPlugin.js" type="text/javascript"></script>
	<script type="text/javascript" src="../js/jcookie.js"></script>
	<style>
		.divsize { width:50px;height:50px;border:1px solid black; float:left }
		.leftround { border-top-left-radius:15px;border-bottom-left-radius:15px }
		.rightround { border-top-right-radius:15px;border-bottom-right-radius:15px }
	</style>
</head>
<body>
	
	<span style="margin:20px 40px; display: inline-block;" id="Topic">topic: No topic</span>
	<div id="understand">
		<img src="../img/understand_200.png">
	</div>
	<div id="dontunderstand">
		<img src="../img/confused_200.png">
	</div>
	<div id="questionContainer" style="display:none">
		<div id="question">
		</div>
		<button id="questionButton"></input>
	</div>

<script type="text/javascript">
	var Topics;
	var lectureKey;
	var userID;
	
	jQuery(function () {
		// update lecture's cookie
		lectureKey = getParameterByName("lectureKey");
		userID = $.cookie('userID');
		// var cookieOptions = {expires: 1, path: '/'};
		// /* { expires: 2, path: '/', domain: 'yourwebsite.com', secure: true } */
		// $.cookie(cookieName_lecture, lectureKey, cookieOptions);
		
		/* Picture click function settings */
		$('#understand').click(function () { submitVoice(true); });
		$('#dontunderstand').click(function () { submitVoice(false);});
		$('#questionButton').button().click(submitQuestion).text('submit');
		
		setInterval(getClassState, 5 * 1000);

		$.getJSON('/getClassLayoutData', { lectureKey : lectureKey }, function (data) {
				Topics = data;
				getClassState();
		});

		getClassState();
		
		submitVoice(true);
	});

	var displayingQuestion = false;

	var getClassState = function () {
		$.getJSON('/getClassState', { lectureKey : lectureKey }, function (data) { 
			for (var i in Topics)
				if (Topics[i].key == data.topicKey)
					$('#Topic').text("topic:" + Topics[i].name);

			if (data.isQuizOn) {
				if (!displayingQuestion)
					$.getJSON('/getQuestions', { questionKey:data.quizQuestionKey }, drawQuestion);

				displayingQuestion = true;
				$('#questionContainer').css('display', 'block');
			}
			else {
				displayingQuestion = false;
				$('#questionContainer').css('display', 'none');
			}
		});
	};

	var drawQuestion = function (qdata) {
		var question = qdata[0];

		var container = jQuery('#question').empty().data('questionKey', question.key);
		var element = $('<div />').appendTo(container);

		var text = $('<div />').text(question.text).appendTo(element);
		var answers = $('<div />').appendTo(element);
		for (var j in question.answers) {
			var answer = question.answers[j];
			var div = $('<div />').appendTo(answers);
			var answerElement = jQuery('<input />').attr('name', question.name).attr('type', 'radio').val(answer.text).appendTo(div);
			div.append(answer.text);
		}
	};

	function submitQuestion() {
		var submitdata = {
			questionKey: $('#question').data('questionKey'),
			answer: $('#question input:checked').val(),
			userID: userID || $.cookie('userID')
		};

		$.get('submitQuestionAnswer', submitdata, function (data) {
			console.log(data);
		});
	}

	function getParameterByName(name)
	{
		name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
		var regexS = "[\\?&]" + name + "=([^&#]*)";
		var regex = new RegExp(regexS);
		var results = regex.exec(window.location.search);
		if(results == null)
			return "";
		else
			return decodeURIComponent(results[1].replace(/\+/g, " "));
	}

	var setUserID = function(newUserId) {
		var cookieOptions = {expires: 1, path: '/'};
		$.cookie('userID', newUserId, cookieOptions);
		userID = newUserId;
	};

	var submitVoice = function (understand) {
		var sendUserID = userID || $.cookie('userID');

		$.get('/setStudentVoice',{ userID: sendUserID, understand: understand, lectureKey: lectureKey }, setUserID );
	}
</script>
</body>
</html>
